<template>
<div class="login-container">
  <div v-loading="isLoading" element-loading-text="登录中">
    <el-form class="login-form" ref="loginFormRef" :model="loginForm" :rules='rules'>
      <el-form-item prop="username">
        <el-input prefix-icon="el-icon-user" v-model="loginForm.username" clearable></el-input>
      </el-form-item>
      <el-form-item prop="password">
        <el-input type="password" prefix-icon="el-icon-lock" v-model="loginForm.password" clearable></el-input>
      </el-form-item>
      <el-form-item>
        <el-button style="width: 100%" type="primary" @click="onLoginClick('loginFormRef')">登录</el-button>
      </el-form-item>
    </el-form>
  </div>
</div>
</template>


<script>
import { getToken } from '@/api/auth'
import { setLocalToken, setLocalCurrentUser, setLocalCurrentCompany, setLocalCurrentTenant } from '@/utils/auth'

export default {
	name: "Login",
  data() {
    return {
      isLoading: false,
      rules: {
        username: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
        password: [{ required: true, message: '请输入口令', trigger: 'blur' }]
      },
      loginForm: {
        username: 'system',
        password: '123456'
      }
    }
  },
  mounted() {

  },
  methods: {
	  onLoginClick(formName) {
		  this.$refs[formName].validate((valid) => {
        if (valid) {
          this.isLoading = true
          getToken(this.loginForm.username, this.loginForm.password).then(responseData => {
            if(responseData.code == 100) {
              const userData = responseData.data
			  setLocalCurrentUser({
                id: userData.userId,
                name: userData.username,
                loginname: userData.loginname,
                company: userData.company,
                department: userData.department,
				tenant: userData.tenant
              })
              setLocalCurrentCompany({
                id: userData.company.id,
                code: userData.company.code,
                name: userData.company.name
              })
              setLocalCurrentTenant({
                id: userData.tenant.id,
                name: userData.tenant.name
              })
              setLocalToken(userData.token)

              this.isLoading = false
              this.$router.go(0)
            } else {
              // this.isError = true
              //  this.loginError = responseData.msg
            }
            this.isLoading = false
          }).catch(error => {
            console.error(error)
            this.isLoading = true
          })
        }
      })
    }
  }
}
</script>

<style scoped lang="scss">
.login-container {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  > div {
    width: 300px;
    margin: 0 auto;
    box-sizing: border-box;
    padding: 20px 0;
    border-radius: 10px;
    .login-title {
      font-size: 18px;
      text-align: center;
      padding-bottom: 20px;
    }
    .login-form {}
  }
}
</style>
